<template>
    <div>
        <header>
        <input type="text" placeholder="请输入内容/商品名称">
        </header>
        <div class="swiper">
            <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.uc1WMWsghuusfhFKjAzBpAHaCU?w=350&h=109&c=7&r=0&o=5&dpr=1.6&pid=1.7"
                alt="">
        </div>
        <div class="content">
            <p>猜你喜欢</p>
            <div class="liebiao">
                <span>综合排序</span>
                <span @click="near">距离最近</span>
                <span @click="high">销量最高</span>
                <span>筛选</span>
            </div>
            <div class="remai">
                <div>年货节热点</div>
                <div>津贴联盟</div>
                <div>满减优惠</div>
                <div>品质联盟</div>
            </div>
        </div>
        <main>
            <div class="list" v-for="(item, index) in list || tankList2 ? list || tankList2 : tankList" :key="index">
                <div class="listleft">
                    <img :src="item.picUrl" alt="">
                </div>
                <div class="listright">
                    <font>{{item.name}}</font>
                    <div class="listdown">
                        <p>{{ item.distance }}</p>
                        <p>{{ item.monthSalesTip }}</p>
                    </div>
                </div>
            </div>
        </main>
    </div>
</template>
<script setup>
import { shop_list } from '../../api';
import { onMounted ,ref} from 'vue';
//定义响应式数据
var tankList=ref([])
//  var near=()=>{
//     for (var j = 0; j < this.tankList.length - 1; j++) {
//                 for (var i = 0; i < this.tankList.length - j - 1; i++) {
//                     if (
//                         parseFloat(this.tankList[i].distance) >
//                         parseFloat(this.tankList[i + 1].distance)
//                     ) {
//                         var temp = this.tankList[i];
//                         this.tankList[i] = this.tankList[i + 1];
//                         this.tankList[i + 1] = temp;
//                     }
//                 }
//             }
//             this.tankList2 = null;
//             this.list = this.tankList;
//  }
onMounted((res)=>{
    shop_list().then((res)=>{
        tankList.value=res.data.list
        console.log(tankList._rawValue);
    })
})
// return{
//     tankList2:null
// }

</script>

<style scoped>
header {
    height: 40px;
    width: 100%;
    text-align: center;
    background-color: rgb(78, 146, 173);
    margin-bottom: 15px;
}

.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
    width: 95%;
    height: 100px;
    margin: 0 auto;
}

header input {
    width: 90%;
    height: 25px;
    text-align: center;
    border-radius: 17px;
    margin-top: 8px;
    border: none;
}

main {
    height: 500px;
    width: 100%;
    overflow: auto;
}

.swiper {
    width: 100%;
    height: 100px;
    margin: 0 auto;
    margin-top: 10px;

}

.swiper img {
    width: 100%;
    height: 100%;
}

.content p {
    text-align: left;
    font-size: 16px;
    font-weight: 700;
}

.liebaio {
    display: flex;
    justify-content: space-between;
}

.liebiao span {
    font-size: 12px;
    margin-right: 30px;
    font-weight: 700;
}

.liebiao span.active {
    color: red;
}

.remai {
    height: 30px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

.remai div {
    height: 30px;
    width: 23%;
    /* border: 1px solid rgb(153, 153, 153); */
    background-color: #e9e7e7;
    text-align: center;
    line-height: 30px;
    font-size: 12px;
}

.list {
    width: 100%;
    height: 120px;
    display: flex;
    /* background-color: antiquewhite; */
    margin-top: 10px;
    /* overflow: auto; */
}

.listleft {
    width: 35%;
    height: 100%;
    text-align: center;
    box-sizing: border-box;
}

.listleft img {
    width: 80%;
    margin-top: 20px;
}

.listright {
    width: 65%;
    height: 100%;
    box-sizing: border-box;
}

.listright font {
    font-weight: 700;
    font-size: 16px;
    margin-top: 10px;
}

.listdown {
    display: flex;
    margin-top: 30px;
    justify-content: space-between;
    box-sizing: border-box;
}

.listdown p {
    margin-right: 10px;
    font-size: 12px;
}
</style>